import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import Store from '../store'
import PageLoading from '@/components/Global/PageLoading'
import { useEffect, useState } from 'react'
import { history, useParams } from 'umi'
import dayjs from 'dayjs'
import BtnBotLayout from '@/components/BtnBotLayout'
import { getData } from '@/servers/http'
import { api } from '@/servers/api'
import EasyModal from '@/components/EasyModal'

export default observer(() => {
    const store = useLocalObservable(() => new Store())
    const { barriersInfo, getBarriersInfo, resetBarriers, showFirst, handleClose } = store
    const { id }: any = useParams()
    const [isEnd, setIsEnd] = useState(false)

    useEffect(() => {
        getBarriersInfo(id)
        getData(api.usersLoginUserInfo).then((res: any) => {
            const { data, status } = res
            if (status !== 200) return
            setIsEnd(dayjs().isAfter(dayjs(data?.userStudent?.end_class_time).endOf('day')))
        })
        return () => {
            resetBarriers()
        }
    }, [])

    if (!Object.keys(barriersInfo).length) {
        return <PageLoading />
    }

    const { detail = {} } = barriersInfo || {}
    const {
        candidate = {},
        educationList = [],
        hobbyCertificate = {},
        jobExpectList = [],
        workExperienceList = [],
        projectExperienceList = [],
        schoolExperienceList = [],
        practiceExperienceList = [],
    } = detail
    const { hobbyList, certificateList } = hobbyCertificate || {}
    const genderList = ['', '男', '女', '保密']
    const labelList = {
        resume: '我的简历',
        experience: '工作经验',
        phone: '联系电话',
        eMail: '联系邮箱',
        address: '住址',
        capacity: '求职意向',
        city: '意向城市',
        area: '工作区域',
        salary: '期望薪资（税前）',
        jionTime: '入职时间',
        workExperience: '工作经验',
        LanguageAbility: '语言能力',
        selfEvaluation: '自我评价',
        intest: '兴趣爱好',
        honor: '荣誉证书',
        educationalBackground: '教育背景',
        school: '院校名称',
        time: '时间',
        majorName: '专业名称',
        professionalAchievement: '专业成绩描述',
        majorCourseDescription: '主修课程描述',
        company: '公司名称',
        post: '职位',
        responsibilityDescription: '职责描述',
        projectExperience: '项目经验',
        projectname: '项目名称',
        internshipContent: '项目描述',
        campusExperience: '校园经历',
        name: '名称',
        position: '职务',
        internshipExperience: '实习经历',
        internshipDescription: '实习内容',
    }

    // 回到场景页面
    const handleBack = () => {
        history.replace(`/level?id=${barriersInfo.scene_id}`)
    }

    // 编辑
    const handleEdit = () => {
        getData(api.usersLoginUserInfo).then((res: any) => {
            const { data, status } = res
            if (status !== 200) return
            const { platform_access_token, mid_domain, open_key } = data || {}
            const callbackUrl = encodeURIComponent(window.location.origin + `/#/resume/result/${id}`)
            window.location.href = `${mid_domain}/job-center/my-resume?token=${platform_access_token}&callback=${callbackUrl}&openKey=`
        })
    }
    return (
        <div className={styles.container}>
            {/* <header>{labelList?.resume}</header> */}
            <BtnBotLayout
                footer={
                    <div className={styles.options}>
                        {!isEnd && (
                            <div className={styles.edit_btn} onClick={handleEdit}>
                                编辑
                            </div>
                        )}
                        <div className={styles.back_btn} onClick={handleBack}>
                            回到场景
                        </div>
                    </div>
                }
            >
                <div className={styles.list}>
                    {/* 个人信息 */}
                    <div className={styles.content}>
                        <div className={styles.content_list}>
                            <div className={styles.name_info}>
                                <div className={styles.name}>{candidate?.name}</div>
                                <div className={styles.sex}>
                                    {genderList[candidate?.gender]} <span /> {candidate?.age}岁
                                </div>
                            </div>
                            <img src={candidate?.avatar} />
                        </div>
                    </div>
                    <div className={styles.address_info}>
                        <div className={styles.info_title}>{labelList?.experience}</div>
                        <div className={styles.info_content}>{candidate?.workExperience}</div>
                        <div className={styles.info_title}>{labelList?.phone}</div>
                        <div className={styles.info_content}>{candidate?.mobile}</div>
                        <div className={styles.info_title}>{labelList?.eMail}</div>
                        <div className={styles.info_content}>{candidate?.email}</div>
                        <div className={styles.info_title}>{labelList?.address}</div>
                        <div className={styles.info_content_last}>
                            {candidate?.provinceName}-{candidate?.cityName}，{candidate?.address}
                        </div>
                    </div>
                    {jobExpectList.length > 0 &&
                        jobExpectList.map((item: any, index: number) => (
                            <div className={styles.address_info} key={`${item?.code}${item?.capacityId}`}>
                                <div className={styles.info_title}>
                                    {labelList?.capacity}
                                    {index + 1}
                                </div>
                                <div className={styles.info_content}>{item?.capacityName}</div>
                                <div className={styles.info_title}>{labelList?.city}</div>
                                <div className={styles.info_content}>{item?.cityName}</div>
                                <div className={styles.info_title}>{labelList?.salary}</div>
                                {/* 薪资相等展示一个就行 */}
                                {item?.minSalary === item?.maxSalary && <div className={styles.info_content}>{item?.minSalary / 1000}k</div>}
                                {item?.minSalary !== item?.maxSalary && (
                                    <div className={styles.info_content}>
                                        {item?.minSalary / 1000}k-{item?.maxSalary / 1000}k
                                    </div>
                                )}
                                <div className={styles.info_title}>{labelList?.jionTime}</div>
                                <div className={styles.info_content_last}>{candidate?.joinTime}</div>
                            </div>
                        ))}

                    <div className={styles.address_info}>
                        <div className={styles.info_title}>{labelList?.LanguageAbility}</div>
                        <div className={styles.info_content}>{candidate?.languageSkill}</div>
                        <div className={styles.info_title}>{labelList?.selfEvaluation}</div>
                        <div className={styles.info_content}>{candidate?.description}</div>
                        <div className={styles.info_title}>{labelList?.intest}</div>
                        <div className={hobbyList.length > 0 ? styles.info_btn_list : styles.info_btn_lis_none}>
                            {hobbyList.length > 0
                                ? hobbyList.map((item: any) => (
                                      <span className={styles.info_content_bg} key={item}>
                                          {item}
                                      </span>
                                  ))
                                : '--'}
                        </div>
                        <div className={styles.info_title}>{labelList?.honor}</div>
                        <div className={styles.info_btn_list_last}>
                            {certificateList.length > 0
                                ? certificateList.map((item: any) => (
                                      <span className={styles.info_content_bg} key={item}>
                                          {item}
                                      </span>
                                  ))
                                : '--'}
                        </div>
                    </div>
                    {educationList.length > 0 &&
                        educationList.map((item: any, index: number) => (
                            <div className={styles.list_education} key={`${item?.code}${item?.endTime}`}>
                                <div className={styles.list_title}>
                                    <div className={styles.list_icon} />
                                    <div className={styles.list_title_text}>
                                        {labelList?.educationalBackground}
                                        {index + 1}
                                    </div>
                                </div>
                                <div className={styles.address_info}>
                                    <div className={styles.info_title}>{labelList?.school}</div>
                                    <div className={styles.info_content}>{item?.name}</div>
                                    <div className={styles.info_title}>{labelList?.time}</div>
                                    <div className={styles.info_content}>
                                        {item?.startTime}至{item?.endTime}
                                    </div>
                                    <div className={styles.info_title}>{labelList?.majorName}</div>
                                    <div className={styles.info_content}>{item?.profession}</div>
                                    <div className={styles.info_title}>{labelList?.professionalAchievement}</div>
                                    <div className={styles.info_content}>{item?.professionDesc || '--'}</div>
                                    <div className={styles.info_title}>{labelList?.majorCourseDescription}</div>
                                    <div className={styles.info_content_last}>{item?.courseDesc || '--'}</div>
                                </div>
                            </div>
                        ))}
                    {workExperienceList.length > 0 &&
                        workExperienceList.map((item: any, index: number) => (
                            <div className={styles.list_education} key={`${item?.code}${item?.endTime}`}>
                                <div className={styles.list_title}>
                                    <div className={styles.list_icon} />
                                    <div className={styles.list_title_text}>
                                        {labelList?.workExperience}
                                        {index + 1}
                                    </div>
                                </div>
                                <div className={styles.address_info}>
                                    <div className={styles.info_title}>{labelList?.company}</div>
                                    <div className={styles.info_content}>{item?.name}</div>
                                    <div className={styles.info_title}>{labelList?.time}</div>
                                    <div className={styles.info_content}>
                                        {item?.startTime}至{item?.endTime}
                                    </div>
                                    <div className={styles.info_title}>{labelList?.post}</div>
                                    <div className={styles.info_content}>{item?.job}</div>
                                    <div className={styles.info_title}>{labelList?.responsibilityDescription}</div>
                                    <div className={styles.info_content_last}>{item?.description || '--'}</div>
                                </div>
                            </div>
                        ))}
                    {projectExperienceList.length > 0 &&
                        projectExperienceList.map((item: any, index: number) => (
                            <div className={styles.list_education} key={`${item?.code}${item?.endTime}`}>
                                <div className={styles.list_title}>
                                    <div className={styles.list_icon} />
                                    <div className={styles.list_title_text}>
                                        {labelList?.projectExperience}
                                        {index + 1}
                                    </div>
                                </div>
                                <div className={styles.address_info}>
                                    <div className={styles.info_title}>{labelList?.projectname}</div>
                                    <div className={styles.info_content}>{item?.name}</div>
                                    <div className={styles.info_title}>{labelList?.time}</div>
                                    <div className={styles.info_content}>
                                        {item?.startTime}至{item?.endTime}
                                    </div>
                                    <div className={styles.info_title}>{labelList?.post}</div>
                                    <div className={styles.info_content}>{item?.job}</div>
                                    <div className={styles.info_title}>{labelList?.internshipContent}</div>
                                    <div className={styles.info_content_last}>{item?.description || '--'}</div>
                                </div>
                            </div>
                        ))}
                    {practiceExperienceList.length > 0 &&
                        practiceExperienceList.map((item: any, index: number) => (
                            <div className={styles.list_education} key={`${item?.code}${item?.endTime}`}>
                                <div className={styles.list_title}>
                                    <div className={styles.list_icon} />
                                    <div className={styles.list_title_text}>
                                        {labelList?.internshipExperience}
                                        {index + 1}
                                    </div>
                                </div>
                                <div className={styles.address_info}>
                                    <div className={styles.info_title}>{labelList?.company}</div>
                                    <div className={styles.info_content}>{item?.name}</div>
                                    <div className={styles.info_title}>{labelList?.time}</div>
                                    <div className={styles.info_content}>
                                        {item?.startTime}至{item?.endTime}
                                    </div>
                                    <div className={styles.info_title}>{labelList?.post}</div>
                                    <div className={styles.info_content}>{item?.job}</div>
                                    <div className={styles.info_title}>{labelList?.internshipDescription}</div>
                                    <div className={styles.info_content_last}>{item?.description || '--'}</div>
                                </div>
                            </div>
                        ))}
                    {schoolExperienceList.length > 0 &&
                        schoolExperienceList.map((item: any, index: number) => (
                            <div className={styles.list_education} key={`${item?.code}${item?.endTime}`}>
                                <div className={styles.list_title}>
                                    <div className={styles.list_icon} />
                                    <div className={styles.list_title_text}>
                                        {labelList?.campusExperience}
                                        {index + 1}
                                    </div>
                                </div>
                                <div className={styles.address_info}>
                                    <div className={styles.info_title}>{labelList?.name}</div>
                                    <div className={styles.info_content}>{item?.name}</div>
                                    <div className={styles.info_title}>{labelList?.time}</div>
                                    <div className={styles.info_content}>
                                        {item?.startTime}至{item?.endTime}
                                    </div>
                                    <div className={styles.info_title}>{labelList?.position}</div>
                                    <div className={styles.info_content_last}>{item?.job}</div>
                                </div>
                            </div>
                        ))}
                </div>
            </BtnBotLayout>

            <EasyModal visible={showFirst} onClose={handleClose} title="任务完成" content={`关卡${barriersInfo.sort}：${barriersInfo.name}，档案已完成`} onOk={handleClose} />
        </div>
    )
})
